<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui_font.css" />
    <link rel="stylesheet" type="text/css" href="../../css/news.css" />
    <link rel="stylesheet" type="text/css" href="../../css/frame3.css" />
    <link rel="stylesheet" href="../../css/swiper.css">
    <style>
        html,
        body {
            background-color: #fff;
        }
       
       #view{
           width: 100vw;
           height: 100vh;
           position: relative;
           background-color: #000;
           overflow: hidden;
       }
       
      
       .lay{
           padding: 10px;
            display: flex;
           justify-content: flex-start;
           align-items: center;
       }
       .avatar-box{
           position: relative;
           margin-right: 8px;
       }
       .avatar{
           width: 35px;
           height: 35px;
           border-radius: 100px;
       }
       .status{
           display: block;
           width: 9px;
           height: 9px;
           background-color: #75fc4c;
           border-radius: 100px;
           position: absolute;
           right: 2px;
           bottom: 5px;
       }
        .status-off{
            display: block;
            width: 9px;
            height: 9px;
            background-color: #dbdbdb;
            border-radius: 100px;
            position: absolute;
            right: 2px;
            bottom: 5px;
        }
       .name{
        color: #FCFBFB;
        font-size: 15px;
       }
       .age{
        color: #FAF9F9;
            font-size: 9px;
           background: url(../../image/zhibo/sex.png) 0 0 no-repeat;
           padding-left: 13px;
           margin-top: 3px;
       }
       
       .wenzi{
           color: #FCFBFB;
           font-size: 16px;
           padding: 0 20px 12px 20px;
       }
       .btn-box{
            width: 90%;
           display: block;
           margin: 0 auto 20px auto;
           position: relative;
           background-image: linear-gradient(to bottom, #8c7ff5 ,#6552f4);
           padding: 11px 0;
           font-size: 15px;
           color: #FCFBFB;
           border-radius: 100px;
           display: flex;
           flex-direction: column;
           justify-content: center;
           align-items: center;

       }
       .btn{
           display: flex;
           align-items: center;
           color: #fff;
       }

       .call{
           width: 20px;
           padding-right: 10px;
       }
       .ope{
           padding: 0 20px;
           display: flex;
           justify-content: space-around;
           align-items: center;
       }
       .opi{
           width: 60px;
           display: flex;
           justify-content: flex-end;
           align-items: center;
       }
       .opi span{
          color: #FAF9F9;
          font-size: 11px;
          margin-left: 5px;
       }
       .info{
           position: absolute;
           left: 0;
           width: 100%;
           top: 80vh;
       }
       .play{
           position: absolute;
           left: calc(50% - 40px);
           top: 50vh;
           width: 80px;
           display: block;
       }
       .nav{
           position: absolute;
           width: 100%;
           left: 0;
           top: 40px;
       }
       .close{
           padding: 20px;
           width: 13px;
           height: 13px;
           position: absolute;
           right: 20px;
           top: 50px;
           z-index: 9999;
       }
       .video{
           width: 100vw;
           height: 100vh;
       }
       .video .video-cover{
           width: 100%;
           height: 100%;
       }
       .swiper{
           width: 100vw;
           height: 100vh;
       }
        .uimg{
            position: relative;
        }
        .dot-online{
            position: absolute;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #4cd964;
            right: 0px;
            top: 3px;
        }
        .dot-offline{
            position: absolute;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #dbdbdb;
            right: 0px;
            top: 3px;
        }

    </style>
</head>

<body>
    <div id="view" v-cloak>
        <img src="../../image/zhibo/close.png" onclick="_closeToWin()" class="close"/>
        <div class="swiper">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="(info,index) in list">
                        <div class="video">
                            <video @click="pauseIt(index)" v-if="now_index === index" class="video-cover" :id="'video'+index" :poster="returnImg(info.cover_url)" :src="returnImg(info.video_url)"></video>
                            <img v-else class="video-cover" :src="returnImg(info.cover_url)"  alt="">
<!--                            <div id="video"></div>-->
                        </div>
                        <img v-if="info.is_can_play === 0 || playing == 0" src="../../image/zhibo/play.png" class="play" onclick="initVideo()">

                        <div class="nav">
                            <div class="lay" @click="goUserInfo(info)">
                                <div class="avatar-box">
                                    <img :src="returnImg(info.user.head_portrait)" class="avatar">
                                    <span v-if="info.user.is_online" class="status"></span>
                                    <span v-else class="status-off"></span>
                                </div>
                                <div>
                                    <div class="name">{{info.user.name}}</div>
                                    <div class="age">{{info.user.age}}</div>
                                </div>
                            </div>
                        </div>
                        <div class="info">
                            <div class="wenzi">{{info.desc}}</div>
                            <div class="btn-box" @click="callIt(info)">
                                <div class="btn">
                                    <img src="../../image/zhibo/call.png" class="call">
                                    语音/视频通话
                                </div>

                            </div>
                            <div class="ope">
                                <div class="opi"></div>
                                <div class="opi" @click="showDetail('modal/gift_modal',{uid: info.user.id})">
                                    <img src="../../image/zhibo/gift.png"  class="icon">
                                    <span>送礼</span>
                                </div>
                                <div class="opi" @click="likeIt(info)">
                                    <img v-if="info.is_like" src="../../image/zhibo/like-on.png"  class="icon">
                                    <img v-else src="../../image/zhibo/like.png"  class="icon">
                                    <span>{{info.praise_times}}</span>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>
            </div>
        </div>
           
    </div>
    <script type="text/javascript" src="../../script/api.js"></script>
    <script type="text/javascript" src="../../script/jquery.js"></script>
    <script type="text/javascript" src="../../script/ffkj.js"></script>
    <script type="text/javascript" src="../../script/vue.js"></script>
    <script type="text/javascript" src="../../script/swiper.js"></script>
    <script type="text/javascript" src="../../script/limitchat.js"></script>
    <script src="../../script/video.js"></script>
    <script type="text/javascript">
        var view = new Vue({
            el: '#view',
            data: {
                playing: 0,
                config:{},
                type: 1,
                now_index: 0,
                info: {},
                list: []
            },
            methods: {
                _url(param, url) {
                    _url(param, url);
                },
                // 返回图片路径
                returnImg(url) {
                    return returnImg(url);
                },
                goUserInfo(data) {
                    go_userInfo(data.user_id, data.user.name, data.user.sex)
                },
                showDetail(url, data){
                    showDetail(url, data)
                },
                pauseIt(index){
                    $('#video'+swiper.activeIndex).trigger('pause');
                    this.playing = 0
                },

                likeIt(info){
                    _ajax('api/video/videoLike', function(ret, err) {
                        if (ret && ret.code == 200) {
                            if(info.is_like){
                                info.is_like = 0
                                info.praise_times = info.praise_times - 1
                            }else{
                                info.is_like = 1
                                info.praise_times = info.praise_times + 1
                            }
                        }
                    }, {
                        user_id: $api.getStorage('userid'),
                        id: info.id
                    })
                },
                // 私聊
                callIt(nv) {
                    checkChat(nv.user.id, function() {
                        // view.data.link = 1;
                        _url({
                            touserid: nv.user.id,
                            title: '与' + nv.user.name + '的聊天',
                            moreType: 1
                        }, 'frame0/liaotian_win')
                    })
                },
                openChat() {

                    var min = view.config.intimate_min;
                    var open = view.info.intimate - min >= 0;
                    var voiceTime = nv.user.free_voice;
                    var videoTime = nv.user.free_video

                    var voiceBtn = _i18n('语音通话')+'🔒';
                    if (voiceTime > 0 || open) {
                        voiceBtn = _i18n('语音通话');
                    }
                    var videoBtn = _i18n('视频通话')+'🔒';
                    if (videoTime > 0 || open) {
                        videoBtn = _i18n('视频通话');
                    }

                    var buttons = [voiceBtn, videoBtn];
                    _action('', buttons, function(bIndex) {
                        if (bIndex != 3) {
                            if (bIndex == 1) {
                                if (voiceTime > 0) {
                                    _alert(_i18n('本次语音可享免费通话') + voiceTime + _i18n('分钟'), function() {
                                        openLM(nv.user.id, 'frame0/liaotian_win', 1)
                                    })
                                } else if (open) {
                                    openLM(nv.user.id, 'frame0/liaotian_win')
                                } else {
                                    _i18n('亲密度达到') + min + '°C'+ _i18n('才能解锁该功能')
                                }
                            } else if (bIndex == 2) {
                                if (videoTime > 0) {
                                    _alert(_i18n('本次视频可享免费通话')+ videoTime + _i18n('分钟'), function() {
                                        openVideoChat(nv.user.id, 'frame0/liaotian_win', 1)
                                    })
                                } else if (open) {
                                    openVideoChat(nv.user.id, 'frame0/liaotian_win')
                                } else {
                                    _i18n('亲密度达到') + min + '°C'+ _i18n('才能解锁该功能')
                                }

                            }
                        }
                    })
                }
            }
        })
        var vplay;
        var swiper;
        apiready = function() {
            view.config = $api.getStorage('config');
            swiper = new Swiper('.swiper-container', {
                direction: 'vertical',
                on:{
                    slideChange: function(){
                        view.now_index = swiper.activeIndex
                        if(swiper.isEnd){
                            getList()
                        }
                        initVideo()

                        // alert('改变了，activeIndex为'+this.activeIndex);
                    },
                },
            })
            view.type = api.pageParam['type'] || 1
            getList(api.pageParam['id'])
        }


        function initVideo(){
            let nv = view.list[swiper.activeIndex]
            if(nv.is_can_play){
                view.playing = 1;
                view.$nextTick(()=>{
                    $('#video'+swiper.activeIndex).trigger('play');
                })

            }else{
                //弹窗提示购买
                _confirm({
                    msg: '该视频需要花费金币'+nv.fee,
                    btn: ['立即购买', '取消'],
                }, function(bIndex) {
                    if (bIndex == 1) {
                        _ajax('api/video/videoFee', function(ret, err) {
                            _msg(ret.msg);
                            if (ret && ret.code == 200) {
                                view.list[swiper.activeIndex].is_can_play = 1
                                initVideo()
                            }
                        }, {
                            user_id: $api.getStorage('userid'),
                            id: nv.id
                        })
                    }
                })
            }

        }

        function getList(id=null){
            _ajax('api/video/detail', function(ret, err) {
                if (ret && ret.code == 200) {
                    id = null
                    const on = view.list.length
                    view.list = view.list.concat(ret.data)
                    view.$nextTick(()=>{
                        swiper.update()
                        if(on === 0){
                            initVideo()
                        }
                    })

                    // swiper.updateSlides()
                }
            }, {
                id: id,
                type: view.type,
                touser: api.pageParam['uid'] || null,
                user_id: $api.getStorage('userid')
            })
        }

        // function callservice(v) {
        //     api.call({
        //         type: 'tel_prompt',
        //         number: v
        //     });
        // }
    </script>
</body>

</html>